<template>
	<view >
		<view  class="pop_title" style="background-color:#dbeff7;">
			<text style="float:left;">通话录音</text>
			
			<uni-icons type="close" color="#ff0000" size="32" style="float:right;margin-right:10rpx;" @click="handleClosePlayVoice()"></uni-icons>
		</view>
		<view  class='audio' >
            
            <!-- <audio :src="audioUrl" :controls="true" :name="audioName"></audio> -->
            
			<view class="flex" >
				<view v-if="show" style="width:90%;float:left;clear:both;">
					<slider style="width:100%;" @change='changeAudio' 
							activeColor='#0E7EFC' :disabled="audioDisabled"
							:min='0' :max="duration" block-size='12'
							:value='currentTime.toFixed(0)' :step='0.1'>
					</slider>
				</view>
			</view>
			<view class="flex">
				
				<view class="flex-2">
					<view class='mr-3'  @click='start'>
						<u-icon class="u-icon" name="play-circle" size="80" v-show='!status' ></u-icon>
						<u-icon class="u-icon" name="pause-circle" size="80" v-show='status'></u-icon>
					</view>
				</view>
				
				<view class='flex-2'>
					<view class='ml-3'>{{getTime(Math.round(currentTime))}}</view>
					
					<view class='ml-3'>{{getTime(Math.round(totalTime))}}</view>
				</view>
			</view>
            
		</view>
	</view>
</template>

<script>
	import {
		mapGetters,mapState
	} from "vuex";
	
	export default {
		data() {
			return {
				context: null,
				currentTime: 0,
				duration: 0,
				totalTime:0,
				status: false,
				audioDisabled:true,
				url:'',
				// url:'http://dd.yaaus.com:9072/public/upload/voice/20240112/e734e051b7094fe16ec4cecb5fdd37bf.m4a',
				title:'通话录音',
				show:true,
				
				runTime:0,
                
                audioUrl:'',
                audioName:''
			};
		},
		props:['voiceUrl','voiceSec'],
		computed: {
			...mapGetters(["userInfo","voiceServiceList"]),
			...mapState({
				callType: state => state.task.callType,
			})
		},
		onHide() {
			uni.$on('stop',()=> {
				this.context.stop();
				this.status = false;
			})
		},
		onUnload() {
			uni.$on('stop',()=> {
				this.context.stop();
				this.status = false;
			})
		},
		methods:{
			handleClosePlayVoice(){
				this.onPause();
                
                this.status = false;
                
                //销毁音频组件
                this.context.destroy();
				
				this.$emit('closePlayVoicePop', '');
			},
			
			start() { 
                //点击播放
                console.log("start status",this.status);
				if(this.status) {
					this.context.pause();
					this.status = !this.status;
				}else {
					// uni.$emit('stop')
                    this.onCanplay();
                    
					this.context.play();
					this.status = !this.status;
				}
			},
			onCanplay() { //进入可播放状态
				this.context.onCanplay((a) => {
					console.log("播放的时长",this.context,this.context.duration,this.context.__timing);
					//this.totalTime = this.context.duration;
					setTimeout(()=>{
						//this.duration = this.context.duration;
                        
                        // if(this.context.duration == 0) {
                        //     this.duration = this.voiceSec;
                        //     this.totalTime = this.voiceSec;
                        // }
                        
                        // this.$callModule.getDuration({
                        //     path: this.audioUrl
                        // }, res => {
                        //     console.log("getDuration",res,this.audioUrl);
                        // });
						
					},1000)
                
				})
			},
            
			onPause(){ //监听暂停状态
				this.context.onPause(()=>{
					console.log("点击暂停了",this.context,this.duration,this.totalTime);
					//调接口保存学习进度
				})
			},
			onTimeUpdate() { //音频播放进度
				 this.context.onTimeUpdate(() => {
					 console.log("播放进度",this.currentTime,this.context.duration,this.context,this.duration,this.totalTime);
					 
					 if(this.totalTime == 0 && this.context.__timing != undefined){
						 this.duration = this.context.__timing;
						 this.totalTime = this.context.__timing;
					 }
					 
					 if (!Number.isFinite( this.duration)) {
						this.context.currentTime = Number.MAX_SAFE_INTEGER;
						this.context.currentTime = 0;
                        this.duration = 0;
					 } else {
						 this.duration = this.duration;
						 this.currentTime = this.context.currentTime;
						 this.runTime = this.context.currentTime;
					 }
				 })
			},
			onEnded() { //播放结束
				this.context.onEnded(()=> {
					//调接口保存学习进度
	
					this.status = false;
					this.currentTime = 0;
				})
			},

			changeAudio(e) {
				let paused = this.context.paused;
				this.context.pause();
				this.context.seek(e.detail.value)
				if(!paused) {
					this.context.play();
				} 
			},
			getTime(time) {
				let result_str = '00:00:00';
				if(time > 0){
					let h = parseInt(time / 60 /60);
					let m = parseInt(time / 60);
					let s = time % 60;
					result_str = this.towNum(h) + ':' + this.towNum(m) + ':' + this.towNum(s);
				}
				
				return result_str;
			},
			towNum(num) {
				if(num >= 10) {
					return num;
				}else {
					return '0' + num;
				}
			}
		},
		watch: {
		    voiceUrl(newVal, oldVal) {
		      // 监听文本框值的改变
		      console.log("playvoice watch newVal",newVal);
			  console.log("playvoice watch oldVal",oldVal);
			  
			  if(newVal){
				  console.log("voiceurl",this.voiceUrl,uni.getStorageSync("userInfo"));
				  let current_voice_url = this.voiceUrl;
				  let voice_url = current_voice_url.replace(this.userInfo.record_path, this.userInfo.record_info);
                  
                  // this.duration = this.voiceSec;
				  
				  //voice_url = "http://acm.donnan.cn:3026/2025-08-07/production_out_17723868872_1754525164.mp3";
				  
				  console.log("voice_url",voice_url);
				  
                  this.audioUrl = voice_url;
                  
				  this.context = uni.createInnerAudioContext();
				  this.context.src = voice_url;
				  this.context.startTime = 0;
				  this.currentTime = 0;
				  this.onTimeUpdate();
				  this.onCanplay();
				  this.onPause();
				  this.onEnded();
                  
					this.start();
					
					setTimeout(()=>{
						this.start();
					},800);
                  
				  uni.$on('stop',()=> {
				  	this.context.stop();
				  	this.status = false;
				  })
			  }
		    }
		},
	}
</script>

<style lang="scss">
	.pop_title{
		font-size:32rpx;
		width:100%;
		padding-left:2%;
		padding-right:2%;
		height:100rpx;
		font-weight: bold;
		line-height: 100rpx;
		border-bottom:#ccc 1px solid;
	}
	
	.audio {
		background: #f7f7f7;
		padding: 20rpx;
		width:100%;
		height:200rpx;

		.mr-3 {
			margin-right: 0rpx;
		}
		.flex {
			.flex-1 {
				text-align: left;
				font-size: 40rpx;
				font-weight: 400;
				margin:0 36rpx;
			}
			.flex-2 {
				font-size: 36rpx;
				margin: 0 6rpx;
				.ml-3{
					float:left;
					margin-left:15rpx;
					margin-right:15rpx;
					line-height: 80rpx;
				}
			}
		}
	}
</style>